<template>
	<view class="u-rela">
		<image class="page-bg"
			:src="dataList.thumbnail == '' ? 'https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-vallige-1.png' : dataList.thumbnail"
			mode="widthFix"></image>
		<!-- <image class="icon-360" src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/vallige/icon-360.png"
			mode="widthFix"></image> -->
		<view class="page-wrap">
			<div class="u-flex">
				<image class="icon-v-1" src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/icon-v-1.png"
					mode="widthFix"></image>
				<text class="u-font-40 blod u-m-l-15 u-flex-1">{{ dataList.name }}</text>
				<view class="u-flex">
					<image class="icon-location2"
						src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/icon-location2.png"
						mode="widthFix"></image>
					<text class="u-font-28 green u-m-l-10" @click="tonav_map">导航</text>
				</view>
			</div>
			<view class="u-flex location-wrap">
				<image class="icon-v-2" src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/icon-v-2.png"
					mode="widthFix"></image>
				<text>地址：{{ dataList.address }}</text>
			</view>
			<view class="u-font-28 u-m-t-40" v-html="dataList.content">
				
			</view>
			<div class="img-wrap">
				<navigator v-for="(item,index) in dataList.urls" class="item" :url="item.url + '?id=' + id" v-if="item.status">
					<image :src="item.img" mode="widthFix"></image>
					<text>{{item.name}}</text>
				</navigator>
			</div>
		</view>
		<!-- 留言 -->
		<view class="msg-wrap">
			<view class="u-flex">
				<image class="icon-comment"
					src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/icon-comment.png" mode="widthFix">
				</image>
				<text class="u-font-36 blod u-m-l-15">留言</text>
			</view>
			<view style="display: flex; align-items: center;">
				<input v-model="comment" placeholder="请输入留言内容" style="width: 85%; background-color: #F8F8F8; padding: 0 10rpx;" />
				<view size="default" @click="toComment" type="default" style="color: #ffffff; background-color:#1AAD19;margin: 0; padding: 10rpx; border-radius: 10rpx;" hover-class="is-hover">
					提交
				</view>
			</view>
			<div class="list">
				<div class="item" v-for="item in commentList" :key="item.message_id">
					<image
						:src="item.userinfo.avatar =='' ? 'https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/icon-avatar.png' : item.userinfo.avatar"
						mode="widthFix"></image>
					<div class="u-font-28 blod">{{ item.userinfo.nickname }}</div>
					<text class="u-font-24 u-tips-color">{{ item.time }}</text>
					<view class="u-font-28 u-m-t-30">{{ item.content }}</view>
				</div>
				<!-- <div class="item">
					<image src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/icon-avatar.png" mode="widthFix"></image>
					<div class="u-font-28 blod">游客_ODA5NEwmj</div>
					<text class="u-font-24 u-tips-color">2023-05-30 16:50</text>
					<view class="u-font-28 u-m-t-30">地方很美，偶尔远离大城市的喧嚣看看乡下美景，
						别有一番滋味</view>
				</div> -->
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				urls: [{
						name: '古村印象',
						img: 'https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-vallige-2.png',
						url: '/pages/vallige-travel/impression'
					},
					{
						name: '触见历史',
						img: 'https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-vallige-3.png',
						url: '/pages/vallige-travel/see-history'
					},
					{
						name: '环境格局',
						img: 'https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-vallige-4.png',
						url: '/pages/vallige-travel/env'
					},
					{
						name: '民俗文化',
						img: 'https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-vallige-5.png',
						url: '/pages/vallige-travel/folk-culture'
					},
					{
						name: '历史文化',
						img: 'https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-vallige-6.png',
						url: '/pages/vallige-travel/history-culture'
					},
					{
						name: '美食物产',
						img: 'https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-vallige-7.png',
						url: '/pages/vallige-travel/food'
					},
					{
						name: '传统建筑',
						img: 'https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-vallige-8.png',
						url: '/pages/vallige-travel/build'
					},
					{
						name: '乡村荣誉',
						img: 'https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-vallige-9.png',
						url: '/pages/vallige-travel/honor'
					}
				],

				id: '',
				dataList: {},

				commentList: [], //评论列表
				comment: '',
				page: 1,
				isNext: true,
				
			}
		},
		onLoad(options) {
			// console.log(options);
			this.id = options.id

			// 乡村详情
			this.get_villages_details(options.id)

			// 评论列表
			this.get_comment_index(options.id)
		},
		methods: {
			// 乡村详情
			get_villages_details(id) {
				this.$http({
					url: this.api.villages_details,
					method: 'GET',
					data: {
						id
					}
				}).then(res => {
					// console.log(res,'乡村详情');
					if (res.code == 1) {
						this.dataList = res.data
						// console.log(this.dataList);
					}
				})
			},

			// 评论列表
			get_comment_index(id) {
				this.$http({
					url: this.api.comment_index,
					method: 'GET',
					data: {
						type: 4,
						target_id: id,
						page: this.page
					}
				}).then(res => {
					// console.log(res, '评论列表');
					if (res.code == 1) {
						this.page += 1;
						this.commentList = [...this.commentList, ...res.data.list]
						this.isNext = res.data.isNext
					}
				})
			},
			
			//跳转到地图
			tonav_map(){
				uni.navigateTo({
					url:`/pages/map/map?latitude=${this.dataList.latitude}&longitude=${this.dataList.longitude}`
				})
			},
			
			// 评论
			toComment() {
				this.$http({
					url: this.api.comment_add,
					method: 'POST',
					data: {
						type: 4,
						target_id: this.id,
						content: this.comment
					}
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '评论成功',
							duration: 2000
						});
						
						this.comment = ''
						this.commentList = []
						this.page = 1
						this.isNext = true
						
						this.get_comment_index(this.id)
					}
				})
			},
			
			// 滚动条触底
			onReachBottom(){
				if (!this.isNext) return
				
				this.get_comment_index(this.id)
			},
		}
	}
</script>

<style scoped lang="scss">
	.page-bg {
		position: relative;
		width: 750rpx;
		height: 750rpx;
		z-index: 1;
	}

	.icon-360 {
		width: 104rpx;
		height: 76rpx;
		position: absolute;
		top: 279rpx;
		left: 323rpx;
		z-index: 2;
	}

	.page-wrap {
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		background-color: #fff;
		padding: 30rpx;
		margin-top: -50rpx;
		position: relative;
		z-index: 2;
	}

	.icon-v-1 {
		width: 40rpx;
		height: 40rpx;
	}

	.icon-location2 {
		width: 36rpx;
		height: 36rpx;
	}

	.location-wrap {
		margin-top: 40rpx;
		padding: 0 20rpx;
		height: 80rpx;
		background: #F2F2F2;
		border-radius: 14rpx;

		.icon-v-2 {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
	}

	.img-wrap {
		width: 100%;
		margin-top: 55rpx;
		display: grid;
		grid-template-columns: 50% 50%;
		// gap: 20rpx;

		.item {
			display: block;
			position: relative;

			image {
				width: 335rpx;
				height: 260rpx;
			}

			text {
				position: absolute;
				bottom: 20rpx;
				left: 20rpx;
				font-size: 28rpx;
				font-family: Source Han Serif SC;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
	}

	.msg-wrap {
		background: #fff;
		padding: 30rpx;
		margin-top: 20rpx;

		.list {

			.item {
				display: grid;
				grid-template-columns: 68rpx 1fr;
				gap: 0 20rpx;
				border-bottom: 1px solid #E6E6E6;
				margin-top: 40rpx;
				padding-bottom: 60rpx;

				image {
					width: 68rpx;
					height: 68rpx;
					grid-row: 1/4;
				}

				&:last-of-type {
					border: 0;
				}

			}
		}
	}

	.icon-comment {
		width: 36rpx;
		height: 36rpx;
	}
</style>
<style>
	page {
		padding: 0;
	}
</style>